<template>
  <div class="publish">
    <el-card>
      <!-- 导航结构样式 -->
      <template #header>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/layout/home' }"
            >首页</el-breadcrumb-item
          >
          <el-breadcrumb-item>文章发布</el-breadcrumb-item>
        </el-breadcrumb>
      </template>
      <!-- 文章发布结构样式 -->
      <el-form label-width="100px" :model="form" :rules="rules" ref="form">
        <el-form-item label="标题：">
          <el-input
            placeholder="请输入文章标题"
            v-model="form.title"
          ></el-input>
        </el-form-item>
        <el-form-item label="频道：">
          <el-select placeholder="请选择" v-model="form.content"></el-select>
        </el-form-item>
        <el-form-item label="封面：">
          <!-- 单选按钮组 -->
          <el-radio-group v-model="form.cover.type">
            <el-radio>单图</el-radio>
            <el-radio>三图</el-radio>
            <el-radio>无图</el-radio>
            <el-radio>自动</el-radio>
          </el-radio-group>
          <!-- 图片上传框 -->
          <el-upload action="#" list-type="picture-card">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="内容：">
          <quillEditor></quillEditor>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">发布文章</el-button>
          <el-button>存入草稿</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
export default {
  name: 'Publish',
  components: {
    quillEditor
  },
  data () {
    return {
      form: {
        title: '', // 文章标题
        content: '', // 文章内容
        cover: {
          type: '', // 封面类型: -1-自动, 0-无图, 1-1张, 3-3张
          images: [] // item类型
        },
        channel_id: '' // 文章所属频道id
      },
      // 表单验证
      rules: {}
    }
  }
}
</script>

<style lang="less" scoped>
.publish {
  ::v-deep .ql-editor {
    min-height: 160px;
  }
}
</style>
